<template>
    <div class="home" style="width: 100%;height: 100%;overflow: hidden;">
        <div class="bander">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item><img src="../../assets/lb2.png" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/lb3.png" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/lb4.png" alt=""></van-swipe-item>
            </van-swipe>
            <div class="login">
                <p><span>登录</span>欢迎使用悦朋软件</p>
                <input type="text" v-model="user.uname" placeholder="请输入用户名">
                <input type="password" v-model="user.upwd" placeholder="请输入密码">
                <input type="text" placeholder="请输入验证码" v-model="yzm">
				<div class="verify"></div>
                <div><span>立即注册</span><span>忘记密码</span></div>
                <button @click="login()">登录</button>
            </div>

        </div>
    </div>
</template>

<script>
	import { Swipe, SwipeItem } from 'vant';
	import setVerifyCode from '../../assets/verify.js'
	import {Login} from '../../api/user/index.js' 
    export default {
		components:{
			[Swipe.name]:Swipe,
			[ SwipeItem.name]: SwipeItem,
		},
        data() {
            return {
                user: {
                    uname: "",
                    upwd: ""
                },
				yzm:''
            }
        },
		mounted(){
			this.check()
		},
        methods: {
			check(){
				setVerifyCode();
			},
            login() {
				Login({fmdo:"login",dopost:"login",userid:this.user.uname,pwd:this.user.upwd})
				.then(res => {
						// 弹出登录提示信息
				
				if(res.data.status==1){
					if(this.yzm == document.querySelector('.verify').innerHTML.toLowerCase()){
						alert(res.data.msg)
						window.localStorage.setItem("userid",this.user.uname)
						 // 存儲用戶的token
						 window.localStorage.setItem("token",res.data.token)
						var redirect = this.$route.query.redirect||"/admin/dash";
						this.$router.replace(redirect);
							}else{
								this.$alert('验证码输入错误', '登录失败', {
								confirmButtonText: '确定'});
								this.check();
								this.yzm = '';
							}
						}else{
							this.$alert('用户名或密码有误', '登录失败', {
							confirmButtonText: '确定'});
						}
						//admin admin
					})
			}

        }
    }
</script>

<style scoped="scoped">
	.home .bander{
		display: flex;
		justify-content: space-around;
	}
    .login input {
        width: 260px;
        height: 40px;
        margin-top: 20px;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding-left: 30px;

    }

    .login button {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        color: #fff;
        background-color: #2465E6;
        text-align: center;
        line-height: 40px;
        border: none;
        margin-top: 20px;
    }

    .login>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        margin-top: 10px;
        color: #666;
    }

    .login input:nth-of-type(1) {
        background: url(../../assets/ren-01.png)no-repeat 4px center/22px;
    }

    .login input:nth-of-type(2) {
        background: url(../../assets/loak.png)no-repeat 4px center/22px;
    }
	.login input:nth-of-type(3){
		width: 120px;
		margin-right: 20px;
	}
	
    .login>p>span {
        color: #2F82FE;
        font-size: 30px;
        font-weight: 800;
        margin-right: 8px;
    }

    .login>p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
    }
    .login {
        margin: auto;
        width: 300px;
        height: 400px;
        border-radius: 10px;
        padding: 30px;
        background-color: #FFFFFF;
        border: 1px solid #ccc;
    }

    .home {
        background: url(../../assets/bg.png)no-repeat center/cover;
        width: 100vw;
        height: 100vh;

    }
    .bander img {
        width: 800px;
    }

    .van-swipe {
        width: 800px;
    }

    .van-swipe__indicators {
        width: 150px;
        bottom: 130px !important;
        justify-content: space-between;
    }

    .van-swipe__indicators i {
        width: 40px;
        border-radius: 0;
        height: 3px;
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
    }
	.my-swipe img{
		width: 600px;
	}
</style>
